<template>
  <article v-loading="loading"
           element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-row :gutter="20">
      <el-col :span="4"><card id-name="recharge_day"
                              title="今日流水"
                              footTitle="较昨日趋势"
                              unit="元"
                              :inc="allGame_recharge_day_inc"
                              :endVal="recharge_day"></card></el-col>
      <el-col :span="4"><card id-name="recharge_month"
                              title="本月流水"
                              footTitle="KPI完成度"
                              unit="元"
                              :inc="allGame_monthSum_inc"
                              :endVal="monthSum"></card></el-col>
      <el-col :span="4"><card id-name="logon_num"
                              title="活跃用户"
                              footTitle="较昨日趋势"
                              unit="人"
                              :inc="allGame_logon_num_inc"
                              :endVal="logon_num"></card></el-col>
      <el-col :span="4"><card id-name="reg_count"
                              title="新增用户"
                              footTitle="较昨日趋势"
                              unit="人"
                              :inc="allGame_registerCount_inc"
                              :endVal="registerCount"></card></el-col>
      <el-col :span="18"><myecharts  title="数据折线图" :legend="legend" :serieName="serieName" :serieType="serieType"
                                     :serieStack="serieStack" :serieData="allGame_echarts"></myecharts></el-col>
    </el-row>

    <el-table :data="tabledata" border show-summary style="width: 100%;"  :summary-method="getSummaries" :header-cell-style="{backgroundColor:theme.bgcolor,color:theme.activeColor}" >
      <el-table-column align="center" type="index"></el-table-column>
      <el-table-column align="center" prop="project_name" sortable label="产品"></el-table-column>
      <el-table-column align="center" prop="count_date" sortable label="日期" :formatter="dateFormatter"></el-table-column>
      <el-table-column align="center" prop="recharge_day" sortable label="日流水"></el-table-column>
      <el-table-column align="center" prop="monthSum" sortable label="月流水"></el-table-column>
      <!--<el-table-column align="center" prop="kpi" sortable label="kpi"></el-table-column>-->
      <el-table-column align="center" prop="completeness" sortable label="KPI完成度" :formatter="completenessFormatter"></el-table-column>
      <el-table-column align="center" prop="registerCount" sortable label="新增账号"></el-table-column>
      <el-table-column align="center" prop="logon_num" sortable label="活跃账号"></el-table-column>
      <el-table-column align="center" prop="recharge_peo" sortable label="付费人数"></el-table-column>
      <el-table-column align="center" prop="arpu" sortable label="arpu" :formatter="arppuFormatter"></el-table-column>
      <el-table-column align="center" prop="dauarpu" sortable label="dauarpu" :formatter="darpuFormatter"></el-table-column>
      <el-table-column align="center" prop="payRate" sortable label="付费率" :formatter="payRateFormatter"></el-table-column>
      <el-table-column align="center" prop="cl_inc" sortable label="昨日新增次留"></el-table-column>
    </el-table>
  </article>
</template>

<script>

  import Card from "../../components/infoCard";
  import Mytable from "../../components/myTable";
  import Myecharts from "../charts/lineEcharts";
  import {mapState,mapGetters} from 'vuex';
  export default {
    components: {Myecharts,Card,Mytable},
    data() {
      return {legend:{
          data:['今日流水','活跃账号','新增账号']
        },serieName:['今日流水','活跃账号','新增账号'],
        serieType:['line'],serieStack:['总量']}
    },
    computed: {
      ...mapState( {
        theme: state => state.app.theme,
        tabledata: state => state.allGame.tableData,
        loading:state => state.allGame.loading,
        recharge_day:state => state.allGame.recharge_day,
        monthSum:state => state.allGame.monthSum,
        logon_num:state => state.allGame.logon_num,
        registerCount:state => state.allGame.registerCount
      }),
      ...mapGetters([
        'allGame_recharge_day_inc',
        'allGame_monthSum_inc',
        'allGame_logon_num_inc',
        'allGame_registerCount_inc',
        'allGame_echarts'
        // ...
      ])
    },
    methods :{
      dateFormatter:function(row, column, cellValue) {
        return cellValue?new Date(cellValue).Format("yyyy-MM-dd"):'';
      },
      completenessFormatter:function (row, column, cellValue) {
        return row.kpi&&row.monthSum?Math.round(row.monthSum/row.kpi * 10000)/100 + '%':0;
      },
      arppuFormatter:function (row, column, cellValue) {
        return row.recharge_peo&&row.recharge_day?(row.recharge_day/row.recharge_peo).toFixed(2):0;
      },
      darpuFormatter:function (row, column, cellValue) {
        return row.logon_num&&row.recharge_day?(row.recharge_day/row.logon_num).toFixed(2):0;
      },
      payRateFormatter:function (row, column, cellValue) {
        return row.logon_num&&row.recharge_peo?Math.round(row.recharge_peo/row.logon_num * 10000)/100 + '%':0;
      },
      getSummaries:function (params ) {
        const sums = [];
        const{columns, data} = params;
        let kpi = data.reduce((p,c)=>{
          return p + Number(c.kpi)||0;
        },0);
        columns.forEach((column,index) => {
          sums[index] = '';
          const values = data.map(item => Number(item[column.property]|| 0));

          switch(index){
            case 3:
            case 4:
            case 6:
            case 7:
            case 8:sums[index] = values.reduce((p,c)=>{
              return p+Number(c)*100;
              },0)/100;break;
            case 5:sums[index]=kpi&&sums[4]?Math.round(sums[4]/kpi * 10000)/100 + '%':0;break;
            case 9:sums[index]=sums[8]&&sums[3]?(sums[3]/sums[8]).toFixed(2):0;break;
            case 10:sums[index]=sums[7]&&sums[3]?(sums[3]/sums[7]).toFixed(2):0;break;
            case 11:sums[index]=sums[7]&&sums[8]?Math.round(sums[8]/sums[7] * 10000)/100 + '%':0;break;
            case 1:sums[index]= '全部游戏';
          }
        });
        return sums;
      }
    }
  }

</script>

<style>
</style>
